<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义属性</title>
    <style>
      * {
        user-select: none;
      }
      div {
        width: 100px;
        line-height: 100px;
        border-radius: 50%;
        text-align: center;
        border: 1px solid gray;
        display: inline-block;
        transition: all 0.3s;
      }
    </style>
  </head>
  <body>
    <!-- 每个元素都带有很多系统属性, 实际开发需要自定义属性做个性化操作 -->
    <!-- 自定义属性 data-属性名=值 -->
    <div data-bg="red" data-plane="p3">红</div>
    <div data-bg="green" data-plane="p4">绿</div>
    <div data-bg="blue" data-plane="p5">蓝</div>
    <br />
    <img src="./images/p0.png" alt="" />

    <script>
      const divs = document.querySelectorAll('div')

      divs.forEach(value => {
        value.onclick = function () {
          // 点击时变为对应的颜色
          console.dir(this) //点击后, 查看元素的 dataset 的属性
          // data-bg :存储在元素的 dataset.bg
          const bg = this.dataset.bg
          this.style.backgroundColor = bg

          // 飞机名:  this.dataset.plane
          // 旧方式读取:
          const plane = this.getAttribute('data-plane')
          console.log(plane)

          const img = document.querySelector('img')
          // 飞机名 拼接到路径中
          img.src = `./images/${plane}.png`
        }
      })
    </script>
  </body>
</html>
